<!-- 菜单悬浮的原理: 通过给菜单添加position:sticky实现, 用法超简单, 仅APP端的低端机不兼容 https://caniuse.com/#feat=css-sticky -->
<template>
	<view>
		<!-- 对于mescroll-body: 需设置:sticky="true", 此应避免在mescroll-body标签前面加其他非定位的元素, 否则下拉区域会被挤出, 无法会隐藏.-->
		<!-- 对于mescroll-uni: 则无需设置:sticky="true", 无其他限制和要求 -->
		<!-- sticky吸顶悬浮的菜单, 父元素必须是 mescroll -->
		<view class="sticky-tabs flex">
			<view style="width: 85%;">
				<me-tabs v-model="tabIndex" nameKey='title' :tabs="tabs" @change="tabChange"></me-tabs>
			</view>
			<view class="shax" @click.stop="openShaixuan(3)">筛选</view>
		</view>

		<!--筛选 -->
		<view class="box" v-if="SXshow" @click="openShaixuan(1)">
			<view class="popbox">
				<view class="padding">
					<view @click.stop="showtime = true">
						<view>预约时间</view>
						<view class="impute padding-lr flex align-center">
							{{startTime1?startTime1:'请选择时间'}}
						</view>
					</view>
					<view>
						<view>订单号</view>
						<view>
							<input type="number" v-model="ordersNo" class="impute padding-lr" placeholder="请输入订单号" />
						</view>
					</view>
					<view>
						<view>手机号</view>
						<view>
							<input type="number" v-model="phone" class="impute padding-lr" placeholder="请输入手机号码" />
						</view>
					</view>
					<view>
						<view>员工</view>
						<view>
							<input type="text" v-model="userName" class="impute padding-lr" placeholder="请输入员工" />
						</view>
					</view>
				</view>
				<view class="btns" @click.stop="bindx()">查询</view>
			</view>
		</view>

		<!-- 数据列表 -->
		<view class="margin-lr-sm margin-top-16 padding-sm bg radius" v-for="(item,index) in goods" :key='index'
			@click="bindtakeDetail(item.ordersId)">
			<view class="flex justify-between">
				<view class="text-blue">{{item.statusName}}</view>
				<view class="text-white">{{item.createTime}}</view>
			</view>
			<view class=" u-flex u-p-t-30">
				<view class="u-m-r-10">
					<image :src="item.homepageImg" style="width: 140rpx;height: 140rpx;" mode="aspectFill"></image>
				</view>
				<view class="u-flex-1 text-white margin-left-xs">
					<view class="text-30  text-bold u-line-1" style="width: 500rpx;">{{item.myLevel}}</view>
					<!-- <view class="u-font-16  text-bold">标题</view> -->

					<view class="u-font-14 margin-top-xs u-tips-color flex justify-between">
						<view class="text-white">
							<view style="display: inline-flex;">
								<view class="margin-top-xs text-white text-df" v-for="(item,index) in item.gameName "
									:key="index" style="margin-right: 10rpx;">{{item}}</view>
							</view>
						</view>
					</view>
					<view class="margin-top-xs">预约时间：{{item.startTime}}</view>
					<view class="text-white text-right margin-top-sm">
						实收: <text class="text-lg">{{item.payMoney}}元</text>
					</view>
				</view>
			</view>
			<view class="margin-top-sm" v-if="item.remarks">
				备注：<text class="text-red">{{item.remarks}}</text>
			</view>
			<view class="flex justify-end u-p-t-20">
				<u-button :custom-style="customStyle1" shape="circle" :plain="true" @click.stop="bindupde(item)"
					v-if="item.state == 4||item.state == 1">修改预约时间</u-button>
				<u-button v-if="item.state == 4" :custom-style="customStyle1" shape="circle" :plain="true"
					@click="bindtakeDetail(item.ordersId)">开始服务</u-button>
				<u-button v-if="item.state == 4" :custom-style="customStyle" shape="circle" :plain="true"
					@click="cancelOrder(item,3)">拒接接单</u-button>
				<!-- <u-button v-if="item.state == 3" :custom-style="customStyle" shape="circle" :plain="true" @click="delOrder(item)">拒接接单</u-button> -->
				<u-button v-if="item.state == 1" :custom-style="customStyle1" shape="circle" :plain="true"
					@click="bindtakeDetail(item.ordersId)">完成服务</u-button>
				<!-- <u-button :custom-style="customStyle" shape="circle" :plain="true" @click="clickItem(item)">联系TA
				</u-button> -->
			</view>
		</view>
		<empty v-if="goods.length == 0"></empty>
		<!-- 确认码弹框 -->
		<view class="boxtk" v-if="reverTrue">
			<view class="whitebox padding">
				<view class="flex justify-between align-center ">
					<view style="font-size:38upx;color:#333333" class="text-bold">确认码</view>
					<view @click="bindclose(1)">
						<image src="/static/images/msg/close.png" style="width:44upx;height:44upx;"></image>
					</view>
				</view>
				<view style="margin-top:59upx;">
					<input placeholder="请输入确认码" name="input" maxlength="10" v-model="codeNum" type="number"
						style="background: #F2F2F2;height:100upx;padding:30upx"></input>
				</view>
				<view class="btn" @click="cancelOrder(goods[codeIndex],2)">确定</view>
			</view>
		</view>

		<!--筛选 -->
		<view class="box" v-if="showData">
			<view class="popbox1 ">
				<view class="flex justify-between align-center  padding-top margin-lr">
					<view style="font-size:38upx;color:#333333" class="text-bold">修改预约时间</view>
					<view @click="showData=false">
						<image src="/static/images/msg/close.png" style="width:44upx;height:44upx;"></image>
					</view>
				</view>
				<view class="padding">
					<view @click.stop="timeTrue = true">
						<view>预约时间</view>
						<view class="impute padding-lr flex align-center">
							{{startTime?startTime:'请选择时间'}}
						</view>
					</view>

					<view>
						<view>备注</view>
						<view style="background: #F2F2F2;" class="padding">
							<textarea v-model="remark" placeholder="修改备注" style="height: 200upx;"></textarea>
						</view>
					</view>
				</view>
				<view class="btns" @click.stop="updete()">确定</view>
			</view>
		</view>
		<u-picker v-model="showtime" mode="time" @confirm="confirm"></u-picker>
		<view class="box11" v-if="timeTrue">
			<view class="paybox padding">
				<view class="flex justify-between align-center">
					<view class="text-bold text-lg">选择上门时间</view>
					<image @tap="timeTrue = false" src="/static/images/msg/close.png" style="width:44upx;height:44upx;">
					</image>
				</view>
				<view class="category-list">
					<view class="left">
						<view class="row" v-for="(item, index) in category" :key="index"
							:class="[index == TabCur ? 'on' : '']" @click="tabSelect(index)">
							<view class="text">
								{{ item.name }}
							</view>
						</view>
					</view>
					<!-- 右侧子导航 -->
					<scroll-view scroll-y="true" class="right" style="white-space: nowrap;overflow-y: auto;">
						<view class="category">
							<view class="list" v-if="timeList.length > 0">
								<view class="box1" v-for="(item, i1) in timeList" :key="i1" @tap="getTimeSel(i1,item)">
									<view v-if='item.over&&TabCur==0' style="color: #999999;"
										:class="index_time == i1 ? 'sel-on' : ''">{{item.serviceTime}}<text
											v-if='item.over' style="margin-left: 32upx;">已过期</text></view>

									<view v-else-if='item.isMax==1&&TabCur==0' style="color: #999999;"
										:class="index_time == i1 ? 'sel-on' : ''">{{item.serviceTime}}<text
											v-if='item.isMax==1' style="margin-left: 32upx;">已预约满</text></view>
									<view v-else :class="index_time == i1 ? 'sel-on' : ''">{{item.serviceTime}}</view>


								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import mescrollBody from "@/components/mescroll-uni/components/mescroll-body/mescroll-body.vue";
	import meTabs from "@/components/mescroll-uni/me-tabs/me-tabs.vue";
	import empty from '../../components/empty.vue'

	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			mescrollBody,
			meTabs,
			empty
		},
		data() {
			return {
				originStartTime: '',
				ordersNo: '',
				phone: '',
				userName: '',
				showData: false,
				startTime: '',
				updeOrderTd: '',
				//修改数据
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				showtime: false,

				remark: '',
				SXshow: false,
				codeNum: '',
				codeIndex: 0,
				reverTrue: false,
				goods: [], // 数据列表
				tabs: [{
						title: '全部',
						status: ''
					}, {
						title: '待服务',
						status: '4'
					}, {
						title: '进行中',
						status: '1'
					}, {
						title: '已完成',
						status: '2'
					},
					{
						title: '已退款',
						status: '3'
					}
				],
				tabIndex: 0, // tab下标
				game: [],
				page: 1,
				limit: 10,
				userId: 0,
				status: 1,
				nickName: '',
				avatar: '',
				customStyle: {
					color: '#999999',
					border: '2rpx solid #999999',
					// backgroundColor: '#1E1F31',
					border: "8rpx",
					width: '180rpx',
					height: '54rpx',
					margin: "0 0 0 20rpx"
				},
				customStyle1: {
					color: '#557EFD',
					border: '2rpx solid #557EFD',
					// backgroundColor: '#1E1F31',
					border: "8rpx",
					width: '200rpx',
					height: '54rpx',
					margin: "0 0 0 10rpx"
				},
				count: '',
				category: [{
						name: '今天'
					},
					{
						name: '明天'
					},
					{
						name: '后天'
					}
				],
				timeTrue: false,
				TabCur: 0,
				timeList: [],
				dateList: [],
				index_time: 0,
				serviceTimeId: ''
			}
		},
		onLoad() {
			this.$queue.showLoading("加载中...");
			this.userId = uni.getStorageSync('userId')
			this.nickName = uni.getStorageSync('nickName')


			for (let i = 0; i < 3; i++) {
				var now = new Date();
				//24 * 3600 * 1000 就是计算一天的时间  
				var date = new Date(now.getTime() + i * 24 * 3600 * 1000);
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				this.dateList.push(year + "-" + month + "-" + day)
			}
			this.getRunTime()
		},
		onShow() {
			this.getOrderlist()
		},
		methods: {
			getRunTime() {
				let userId = uni.getStorageSync('userId');
				//查询时间列表
				let data = {
					userId: userId
				}
				this.$Request.getT('/app/serviceTime/selectServiceTime', data).then(res => {
					if (res.code == 0) {
						this.timeList = [];

						var now = new Date();
						var hh = now.getHours(); //时
						var ii = now.getMinutes(); //分

						var nowTime = hh + ':' + ii
						res.data.forEach(d => {
							if (d.serviceTime) {
								let newTime = {}
								let lastTime = d.serviceTime.split('~')[1]
								let over = this.CompareDate(lastTime, nowTime)
								// console.error('当前时间' + nowTime + '----结束时间' + lastTime + '---' + over)
								newTime.serviceTime = d.serviceTime
								newTime.over = over
								newTime.serviceTimeId = d.serviceTimeId
								newTime.isMax = d.isMax
								this.timeList.push(newTime)
							}
						});
					}
				})
			},
			CompareDate(time1, time2) {
				var date = new Date();
				var a = time1.split(":");
				var b = time2.split(":");
				// console.log(a,b,'-----------',date.setHours(a[0], a[1]) < date.setHours(b[0], b[1]))
				return date.setHours(a[0], a[1]) < date.setHours(b[0], b[1]);
			},
			getTimeSel(index, item) {
				if (item.over && this.TabCur == 0) {
					this.$queue.showToast('当前时间段已过请选择其他时间段')
				} else if (item.isMax == 1 && TabCur == 0) {
					this.$queue.showToast('当前时间段已预约满请选择其他时间段')
				} else {
					// this.startTime
					this.index_time = index;
					// this.deliveryTime = this.timeList[index].serviceTime;
					// this.returnTime = this.dateList[this.TabCur];
					this.startTime = this.dateList[this.TabCur] + ' ' + this.timeList[index].serviceTime
					this.serviceTimeId = this.timeList[index].serviceTimeId
					// console.log(  this.timeList[index],this.serviceTimeId)
					// return
					this.timeTrue = false;
				}

			},
			tabSelect(index) {
				this.TabCur = index;
				// this.index_time = index;
			},
			bindx() {
				this.SXshow = false
				this.page = 1
				this.getOrderlist()
				this.phone = ''
				this.userName = ''
				this.ordersNo = ''
				this.startTime = ''
			},
			openShaixuan(index) {
				if (index == 3) {
					this.SXshow = !this.SXshow
				} else if (index == 1) {
					this.SXshow = true
				} else if (index == 2) {
					this.showData = true
				}
			},
			confirm(e) {
				this.startTime1 = e.year + '-' + e.month + ' ' + e.day
			},
			updete() {
				let that = this
				// if (!that.startTime) {
				// 	uni.showToast({
				// 		title: '请选择时间',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				if(that.originStartTime !== that.startTime && !that.remark){
					uni.showToast({
						icon: 'none',
						title: '备注内容不能为空!'
					})
					return;
				}
				uni.showModal({
					title: '提示',
					content: '确定修改订单信息？',
					success: function(res) {
						if (res.confirm) {
							that.showData = false
							let data = {
								ordersId: that.updeOrderTd,
								startTime: that.startTime,
								remarks: that.remark
							}
							that.$Request.post('/app/orders/updateStartTime', data).then(res => {
								if (res.code == 0) {

									this.page = 1
									that.getOrderlist()
									this.startTime = ''
									this.remark = ''
								} else {
									that.$queue.showToast(res.msg);
								}
							})
						}
					},
				})

			},
			bindupde(item) {
				this.originStartTime = item.startTime;
				this.startTime = item.startTime
				this.updeOrderTd = item.ordersId
				this.showData = true
			},
			bindclose(index) {

				if (index == 1) {
					this.reverTrue = false
				} else if (index == 2) {
					this.showData = false
				}
				console.log(index, '关闭弹框', this.showData)
			},
			Ordersure(index) {
				this.codeIndex = index;
				this.reverTrue = true
			},
			// 接单详情
			bindtakeDetail(e) {
				console.log(e)
				let id = e
				uni.navigateTo({
					url: '/my/order/pay?id=' + id
				})
			},
			getOrderlist() {
				let curTab = this.tabs[this.tabIndex].status

				let data = {
					status: curTab,
					page: this.page,
					limit: this.limit,
					startTime: this.startTime1,
					ordersNo: this.ordersNo,
					phone: this.phone,
					name: this.userName
				}
				this.$Request.get('/app/orders/selectMyTakeOrders', data).then(res => {
					uni.hideLoading();
					if (this.page == 1) this.goods = []; //如果是第一页需手动制空列表
					res.data.list.forEach(ret => {
						switch (ret.state) {
							case 0:
								ret.statusName = '待接单'
								break;
							case 1:
								ret.statusName = '进行中'
								break;
							case 2:
								ret.statusName = '已完成'
								break;
							case 3:
								ret.statusName = '已拒绝'
								break;
							case 4:
								ret.statusName = '待服务'
								break;
						}
					})
					this.goods = [...this.goods, ...res.data.list]; //追加新数据
					this.count = res.data.totalCount
					for (let i = 0; i < this.goods.length; i++) {
						this.goods[i].gameName = this.goods[i].gameName.split(",");

					}
				})
			},
			// 切换菜单
			tabChange() {
				this.goods = []; // 置空列表,显示加载进度条
				this.page = 1
				this.getOrderlist()
			},
			// 取消订单
			cancelOrder(e, status) {
				let that = this
				let content = ''
				if (status == 3) {
					content = '确定拒绝接单吗？'
				} else if (status == 2) {
					content = '确定订单已经完成吗？如果未完成，客户投诉将采取封号处理'
					if (that.codeNum.length < 3) {
						uni.showToast({
							title: '请填写收货码（不少于四位数）',
							duration: 1000,
							icon: 'none'
						});
						return
					}
				}
				uni.showModal({
					title: '提示',
					content: content,
					success: function(res) {
						if (res.confirm) {
							let data = {
								id: e.ordersId,
								code: that.codeNum,
								status
							}
							that.$Request.get('/app/orders/cancelOrder', data).then(res => {
								if (res.code == 0) {
									that.reverTrue = false
									that.getOrderlist()
								} else {
									that.$queue.showToast(res.msg);
								}
							})
						}
					},
				})

			},
			//
			clickItem: function(options) {
				let data = {
					userId: this.userId,
					focusedUserId: options.ordersUserId,
					userType: 3
				}
				this.$Request.postJson('/app/chat/insertChatConversation ', data).then(res => {
					if (res.code == 0) {
						// console.log(options.userName,'--------')
						// return
						let id = this.userId == res.data.userId ? res.data.focusedUserId : this.userId
						uni.navigateTo({
							url: '/pages/msg/im?chatConversationId=' + res.data.chatConversationId +
								'&byUserId=' + id + '&teamName=' + options.userName
						})
					}
				})
			},
			goNav(e) {
				uni.navigateTo({
					url: e
				})
			}
		},
		onReachBottom: function() {
			if (this.count = this.goods.length) {
				uni.showToast({
					title: '到底了~',
					icon: 'none'
				})
			} else {
				this.page = this.page + 1;
				this.getOrderlist()
			}
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.getOrderlist()
		},
	}
</script>

<style lang="scss">
	/*
	sticky生效条件：
	1、父元素不能overflow:hidden或者overflow:auto属性。(mescroll-body设置:sticky="true"即可, mescroll-uni本身没有设置overflow)
	2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
	3、父元素的高度不能低于sticky元素的高度
	4、sticky元素仅在其父元素内生效,所以父元素必须是 mescroll
	*/
	.sticky-tabs {
		z-index: 990;
		position: sticky;
		top: var(--window-top);
		// background-color: #fff;
	}

	.boxtk {
		width: 100%;
		height: 162vh;
		background: rgba(0, 0, 0, 0.7);
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;

	}

	.whiteboxs {
		// width: 461upx;
		// height: 563upx;
		text-align: -webkit-center;
		border-radius: 32upx;
		margin: 0 auto;
		position: fixed;
		top: 185px;
		left: 0;
		right: 0;
		z-index: 99;
	}

	.whitebox {
		width: 550upx;
		height: 440upx;
		background: #FFFFFF;
		border-radius: 32upx;
		margin: 0 auto;
		position: fixed;
		top: 450upx;
		left: 0;
		right: 0;
		z-index: 99;
	}

	.btn {
		width: 400upx;
		height: 88upx;
		background: #557EFD;
		// box-shadow: 0upx 10upx 20upx 0upx #FFD9B3;
		border-radius: 16upx;
		margin: 0 auto;
		color: #fff;
		text-align: center;
		line-height: 88upx;
		margin-top: 43upx;
	}

	// 使用mescroll-uni,则top为0
	.mescroll-uni,
	/deep/.mescroll-uni {
		.sticky-tabs {
			top: 0;
		}
	}

	.demo-tip {
		padding: 18upx;
		font-size: 24upx;
		text-align: center;
	}

	page {
		background-color: #F7F7F7;
	}

	.bg {
		background-color: #FFFFFF;
	}

	.tabber {
		width: 100%;
		background: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		justify-content: flex-end;
		height: 127rpx;
	}

	.box {
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.2);

		/* opacity: 0.2; */
		position: absolute;
		bottom: 0px;
		z-index: 9
	}

	.popbox1 {
		width: 749upx;
		/* height: 764upx; */
		background: #FFFFFF;
		padding-bottom: 72rpx;
		z-inde: 9;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		bottom: 0upx;
		/* #endif */
		/* #ifndef H5 */
		bottom: 0rpx;
		/* #endif */
		border-radius: 24upx 24upx 0upx 0upx;
	}

	.popbox {
		width: 749upx;
		/* height: 764upx; */
		background: #FFFFFF;
		padding-bottom: 72rpx;
		z-inde: 99;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		top: 160upx;
		/* #endif */
		/* #ifndef H5 */
		top: 0rpx;
		/* #endif */

	}

	.impute {
		background: #F2F2F2;
		height: 80rpx;
		margin: 20rpx 0;
	}

	.btns {
		width: 690upx;
		height: 88upx;
		color: #FFFFFF;
		background: #5E81F9;
		box-shadow: 0upx 10upx 20upx 0upx #FFD9B3;
		border-radius: 16upx;
		text-align: center;
		line-height: 88rpx;
		font-size: 32rpx;
		font-weight: bold;
		margin: 0 auto;
	}

	.shax {
		width: 15%;
		background: #FFFFFF;
		box-shadow: 0px -12px 10px 12px #D9D9D9;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		// box-shadow: 0upx 0upx 20upx 30upx #FFD9B3;
		// height: 80upx;
		// line-height: 60upx;

	}

	.box11 {
		width: 100%;
		height: 162vh;
		background: rgba(0, 0, 0, 0.7);
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;

	}

	.paybox {
		width: 750upx;
		height: 657upx;
		background: #FFFFFF;
		border-radius: 32upx 32upx 0upx 0upx;
		position: fixed;
		bottom: 0upx;
		left: 0;
		right: 0;
		z-index: 999;
	}

	.category-list {
		width: 100%;
		margin-top: 20upx;
		display: flex;

		.left,
		.right {
			height: 500upx;
			margin-top: 30upx;
			bottom: 0upx;
		}

		.left {
			width: 24%;
			left: 0upx;
			background-color: #FFFFFF;

			.row {
				width: 100%;
				height: 90upx;
				display: flex;
				align-items: center;
				background: #f1f1f7;
				margin-top: 2upx;

				.text {
					width: 100%;
					position: relative;
					font-size: 28upx;
					display: flex;
					justify-content: center;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;

					.block {
						position: absolute;
						width: 0upx;
						left: 0;
					}
				}

				&.on {
					background-color: #FFFFFF;
					color: #45AEFF;

					.text {
						font-size: 28rpx;

						.block {
							width: 8upx;
							height: 100upx;
							top: -72%;
						}
					}
				}
			}
		}

		.right {
			margin-left: 20upx;
			width: 70%;
			left: 24%;
			background-color: #FFFFFF;
			// border-radius: 30upx;
			white-space: nowrap;
			overflow-y: auto;

			.category {
				width: 100%;

				.list {
					width: 100%;
					display: flex;
					flex-wrap: wrap;

					.box1 {
						width: 100%;
						height: 80upx;
						line-height: 80upx;
						margin-bottom: 30upx;
						border: 1upx unset #333333;

						.sel-on {
							color: #45AEFF;
						}
					}
				}
			}
		}
	}
</style>
